<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的博客</title>
		<style>
			html{
				margin: 0 auto;
				padding: 0;
				width: 100%;
				min-width: 1000px;
				background: url(img/top.jpg) no-repeat center top #075498;
			}
			body{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 100%;
				margin: auto;
			}
			.container .header{
				
			}
			.container .header .title{
				position: relative;
				font: 38px/1.2 "微软雅黑";
				padding-left: 4px;
				animation: title-animation 3s;
				-moz-animation: title-animation 3s;/* Firefox */
				-webkit-animation: title-animation 3s;/* Safari 和 Chrome */
				-o-animation: title-animation 3s;/* Opera: */
			}
			@keyframes title-animation{
				0%{left: 50px;top: 0;opacity: 0;}
				100%{left: 0px; top: 0px;opacity: 1;}
			}
			@-webkit-keyframes title-animation{/* Safari 和 Chrome */
				0%{left: 50px;top: 0;opacity: 0;}
				100%{left: 0px; top: 0px;opacity: 1;}
			}
			@-moz-keyframes title-animation{/* Firefox */
				0%{left: 50px;top: 0;opacity: 0;}
				100%{left: 0px; top: 0px;opacity: 1;}
			}
			@-o-keyframes title-animation{/* Opera: */
				0%{left: 50px;top: 0;opacity: 0;}
				100%{left: 0px; top: 0px;opacity: 1;}
			}
			.container .header .title a{
				text-decoration: none;
				color: #ffffff;
				letter-spacing: 0.4em;
			}
			.container .header .banner{
				height: 50px;
				padding: 0px 0px 0px 4px;
				position: relative;
				animation-delay: 2s;
				-webkit-animation-delay: 3s;/* Safari 和 Chrome */
				animation: banner-animation  3s;
				-webkit-animation:banner-animation  3s;/* Safari 和 Chrome */
				-moz-animation:banner-animation  3s;/* Firefox */
				-o-animation:banner-animation  3s;/* Opera: */
			}
			@keyframes banner-animation{
				0%{left: 0px;top: 40px;opacity: 0;}
				100%{left: 0px; top: 0px;opacity: 1;}
			}
			@-webkit-keyframes banner-animation{/* Safari 和 Chrome */
				0%{left: 0px;top: 40px;opacity: 0;}
				100%{left: 0px; top: 0px;opacity: 1;}
			}
			@-moz-keyframes banner-animation{/* Firefox */
				0%{left: 0px;top: 40px;opacity: 0;}
				100%{left: 0px; top: 0px;opacity: 1;}
			}
			@-o-keyframes banner-animation{/* Opera: */
				0%{left: 0px;top: 40px;opacity: 0;}
				100%{left: 0px; top: 0px;opacity: 1;}
			}
			.container .header .banner li{
				list-style: none;
				float: left;
				padding: 10px 30px 10px 0px;
			}
			.container .header .banner li a{
				text-decoration: none;
				color: #FFFFFF;
				font-size: 18px;
				display: block;
				z-index: 2;
			}
			.container .header .banner li span{
				text-align: center;
				display: block;
				font-size: 14px;
				color: #FFFFFF;
				z-index: 1;
				opacity: 0;
				line-height: 35px;
				position: relative;
				bottom: 12px;
				cursor: pointer;
			}
			.container .header .banner span:hover{
				opacity: 1;
				animation: small-tilte 1s;
				-webkit-animation:small-tilte  1s;/* Safari 和 Chrome */
				-moz-animation:small-tilte  1s;/* Firefox */
				-o-animation:small-tilte  2s;/* Opera: */
			}
			@keyframes small-tilte{
				0%{left: 0px;bottom: 20px;opacity: 0;}
				100%{left: 0px; bottom: 12px;opacity: 1;}
			}
			@-webkit-keyframes small-tilte{/* Safari 和 Chrome */
				0%{left: 0px;bottom: 20px;opacity: 0;}
				100%{left: 0px; bottom: 12px;opacity: 1;}
			}
			@-moz-keyframes small-tilte{/* Firefox */
				0%{left: 0px;bottom: 20px;opacity: 0;}
				100%{left: 0px; bottom: 12px;opacity: 1;}
			}
			@-o-keyframes small-tilte{/* Opera: */
				0%{left: 0px;bottom: 20px;opacity: 0;}
				100%{left: 0px; bottom: 10px;opacity: 1;}
			}
			.container .content{
				width: 99.6%;
				margin: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(255,255,255,0.2);
			}
			.container .content .contentInfo{
				height: 90%;
				width: 90%;
				margin: 5% 0;
				background: rgba(255,255,255,0.2);
				box-shadow: #075498 0px 1px 10px ;
			}
			.container .content .contentInfo .infoTop{
				margin: 30px;
				padding: 0px;
				overflow: hidden;
				position: relative;
				animation: infoTop 2s;
				-webkit-animation: infoTop 2s;
			}
			@keyframes infoTop{
				0%{left:0px;bottom: 30px;opacity: 0.2;}
				100%{left: 0px;bottom: 0px;opacity: 1;}
			}
			@-webkit-keyframes infoTop{/* Safari 和 Chrome */
				0%{left:0px;bottom: 30px;opacity: 0.2;}
				100%{left: 0px;bottom: 0px;opacity: 1;}
			}
			@-moz-keyframes infoTop{/* Firefox */
				0%{left: 0px;bottom: 30px;opacity: 0.2;}
				100%{left: 0px;bottom: 0px;opacity: 1;}
			}
			@-o-keyframes infoTop{/* Opera: */
				0%{left: 0px;bottom: 30px;opacity: 0.2;}
				100%{left: 0px;bottom: 0px;opacity: 1;}
			}
			
			.container .content .contentInfo .infoTop li{
				width:30%;
				padding: 10px;
				list-style: none;
				float: left;
				margin-right: 1.35%;
				background: #FFFFFF;
				position: relative;
			}
			.container .content .contentInfo .infoTop li:nth-child(3){
				margin-right: 0px;
			}
			.container .content .contentInfo .infoTop li img{
				width: 100%;
				height: 100%;
				cursor: pointer;
			}
			.container .content .contentInfo .infoTop li img:hover + label,
			.container .content .contentInfo .infoTop li label:hover{
				display: block;
			}
			.container .content .contentInfo .infoTop li label{
				width: 251px;
			    height: 214px;
			    display: block;
			    text-align: center;
			    margin: 10px;
			    position: absolute;
			    left: 0px;
			    top: 0px;
  				background: rgba(0,0,0,0.5);
			    display: none;
			}
			.container .content .contentInfo .infoTop li label img{
				display: block;
				height: 100px;
				width: 60px;
				margin: 10px auto;
				text-align: center;
			}
			.container .content .contentInfo .infoTop li label a{
				text-decoration:underline ;
				color: #FFFFFF;
				font-size: 14px;
				cursor: pointer;
			}
			.container .content .contentInfo .infoTop li p{
				margin: -3px 0 0;
				font-size: 14px;
				background: #ececec;
				color: #666666;
				text-align: justify;
				line-height: 22px;
				padding:5px 10px 10px;
			}
			.container .content .contentInfo .infoTop li p span{
				display: block;
				text-align: center;
				line-height: 40px;
			}
			.container .content .contentInfo .infoTop li p span a{
				text-decoration: none;
				color:#226039 ;
				width: 100%;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.container .content .contentInfo .infoBottom{
				margin: 0px 30px;
				padding: 0;
				list-style: none;
				position: relative;
			}
			.container .content .contentInfo .infoBottom:before{
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				width: 5px;
				left: 142px;
				background: #afdcf8;
				margin-left: -10px;
			}
			.container .content .contentInfo .infoBottom li{
				position: relative;
			}
			.container .content .contentInfo .infoBottom li:hover time{
				background: #AFDCF8;
				border-radius: 20px 0px 0px 20px;
			}
			.container .content .contentInfo .infoBottom li:hover .timeline-circle{
				box-shadow: #FFFFFF 0 0 0 3px;
			}
			
			.container .content .contentInfo .infoBottom time{
				width: 100px;
				display: block;
				float: left;
				padding-right: 33px;
				-webkit-transition:all 1s;
			}
			.container .content .contentInfo .infoBottom li:hover time .date{
				font-size: 14px;
				color: #ECECEC;
			}
			.container .content .contentInfo .infoBottom li:hover time .year{
				font-size: 22px;
				color: #FFFFFF;
			}
			.container .content .contentInfo .infoBottom time span{
				display: block;
				text-align: right;
			}
			.container .content .contentInfo .infoBottom time .date{
				font-size: 14px;
				color: #FFFFFF;
			}
			.container .content .contentInfo .infoBottom time .year{
				font-size: 22px;
				color: #6cbfee;
			}
			.container .content .contentInfo .infoBottom .timeline-circle{
				position: absolute;
				left: 129px;
   				top: 12px;
  				width: 10px;
   				height: 10px;
				border-radius: 50%;
				background: #46a4da;
				color: #FFFFFF;
				box-shadow: #afdcf8 0 0 0 3px;
			}
			.container .content .contentInfo .infoBottom .timeline-content{
				position: relative;
				margin: 0px 0px 20px 165px;
				padding: 24px;
				height: 168px;
				width: auto;
				border-radius: 5px;
				color: #FFFFFF;
				animation: timeline 2s;
				-webkit-animation: timeline 2s;
			}
			@keyframes timeline{
				0%{left:30px;top: 0px;opacity: 0.2;}
				100%{left: 0px;top: 0px;opacity: 1;}
			}
			@-webkit-keyframes timeline{/* Safari 和 Chrome */
				0%{left:30px;top: 0px;opacity: 0.2;}
				100%{left: 0px;top: 0px;opacity: 1;}
			}
			@-moz-keyframes timeline{/* Firefox */
				0%{left: 30px;top: 0px;opacity: 0.2;}
				100%{left: 0px;top: 0px;opacity: 1;}
			}
			@-o-keyframes timeline{/* Opera: */
				0%{left: 30px;top: 0px;opacity: 0.2;}
				100%{left: 0px;top: 0px;opacity: 1;}
			}
			.container .content .contentInfo .infoBottom li:nth-child(odd) .timeline-content{
				background: #579dc5;
			}
			.container .content .contentInfo .infoBottom li:nth-child(even) .timeline-content{
				background: #3594cb;
			}
			.container .content .contentInfo .infoBottom li:nth-child(odd) .timeline-content:after{
				border-right-color: #579dc5;
			}
			
			.container .content .contentInfo .infoBottom li:nth-child(even) .timeline-content:after{
				border-right-color: #3594cb;
			}
			.container .content .contentInfo .infoBottom .timeline-content:after{
				position: absolute;
				right: 100%;
				top: 8px;
				width: 0px;
				height: 0px;
				content: '';
				border: solid transparent;
				/*border-right-color: #3594cb;*/
				border-width: 10px;
			}
			.container .content .contentInfo .infoBottom .timeline-content .content-title{
				font-size: 16px;
				font-weight: bold;
				margin: 0px;
				padding: 0px 0px 10px 0px;
				text-shadow: rgba(7, 84, 152, 0.71) 1px 1px 1px;
			}
			.container .content .contentInfo .infoBottom .timeline-content .timeline-contentInfo{
				height: 130px;
				margin: 0px;
			}
			.container .content .contentInfo .infoBottom .timeline-content .timeline-contentInfo img{
				width: 200px;
				height: 100%;
			}
			.container .content .contentInfo .infoBottom .timeline-content .timeline-contentInfo span{
				width: 390px;
    			display: inline-block;
   			 	vertical-align: top;
    			font-size: 14px;
   			 	margin-left: 10px;
			}
			.container .content .contentInfo .infoBottom .timeline-content .timeline-contentInfo span a{
				display: inline-block;
   				margin: 20px 10px;
    			float: right;
    			text-decoration: none;
			    padding: 7px;
			    color: #ffffff;
			    background: #075498;
			    border-radius: 4px;
			}
			.footer p{
				font-size: 14px;
				text-align: center;
				color: #FFFFFF;
			}
		</style>
	</head>
    <body>
    	<div class="container">
    		<div class="header">
    			<p class="title"><a href="#">Wang@博客</a></p>
    			<ul class="banner">
    				<li><a href="#">首页</a><span>Home</span></li>
    				<li><a href="#">关于我</a><span>About</span></li>
    				<li><a href="#">慢生活</a><span>Life</span></li>
    				<li><a href="#">碎言碎语</a><span>Doing</span></li>
    				<li><a href="#">模板分享</a><span>Share</span></li>
    				<li><a href="#">学无止境</a><span>Learn</span></li>
    				<li><a href="#">留言</a><span>Saying</span></li>
    			</ul>
    			
      	 	</div>
      	 	<div class="content">
      	 		<div class="contentInfo">
      	 			<ul class="infoTop">
      	 				<li>
      	 					<img src="img/t01.jpg" />
      	 					<label>
      	 						<img src="img/yu.png"/>
      	 						<a>下载个人模版</a>
      	 					</label>
      	 					<p>
      	 						<span><a href="#">灯具公司复古风格PSD设计稿</a></span>
      	 						此模板为PSD设计稿，复古风格。首页主要突出产品，以及公司简介。手绘灯作为头部背景图片，这个比较特别。html可以做出灯一闪一闪的效果，或者说旁边有个按钮...
      	 					</p>
      	 				</li>
      	 				<li>
      	 					<img src="img/t02.jpg" />
      	 					<label>
      	 						<img src="img/yu.png"/>
      	 						<a>下载个人模版</a>
      	 					</label>
      	 					<p>
      	 						<span><a href="#">个人博客模板古典系列之——江南墨..</a></span>
      	 						一共是四个页面，首页，图文列表，图片列表，文字内容。此模板风格为中国古典风格，山水画墨迹成就一幅江南墨卷。页面首页设计较为简单，突出文章重点。图文列表显示...
      	 					</p>
      	 				</li>
      	 				<li>
      	 					<img src="img/t03.jpg" />
      	 					<label>
      	 						<img src="img/yu.png"/>
      	 						<a>下载个人模版</a>
      	 					</label>
      	 					<p>
      	 						<span><a href="#">美丽的茧</a></span>
								让世界拥有它的脚步，让我保有我的茧。当溃烂已极的心灵再不想做一丝一毫的思索时，就让我静静回到我的茧内，以回忆为睡榻，以悲哀为覆被，这是我唯一的美丽。      	 					</p>
      	 				</li>
      	 			</ul>
      	 			<ul class="infoBottom">
      	 				<li >
      	 					<time>
      	 						<span class="date">08-08</span>
      	 						<span class="year">2017</span>
      	 					</time>
      	 					<div class="timeline-circle circle-normal"></div>
      	 					<div class="timeline-content">
      	 						<p class="content-title">三步实现滚动条触动css动画效果</p>
      	 						<P class="timeline-contentInfo">
      	 							<img src="img/t03.jpg"/>
      	 							<span>
      	 								现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...
      	 								<a href="#">阅读全文>></a>
      	 							</span>
      	 						</P>
      	 					</div>
      	 				</li>
      	 				<li>
      	 					<time>
      	 						<span class="date">08-08</span>
      	 						<span class="year">2017</span>
      	 					</time>
      	 					<div class="timeline-circle circle-normal"></div>
      	 					<div class="timeline-content">
      	 						<p class="content-title">三步实现滚动条触动css动画效果</p>
      	 						<P class="timeline-contentInfo">
      	 							<img src="img/t02.jpg"/>
      	 							<span>
      	 								现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...
      	 								<a href="#">阅读全文>></a>
      	 							</span>
      	 						</P>
      	 					</div>
      	 				</li>
      	 				<li>
      	 					<time>
      	 						<span class="date">08-08</span>
      	 						<span class="year">2017</span>
      	 					</time>
      	 					<div class="timeline-circle circle-normal"></div>
      	 					<div class="timeline-content">
      	 						<p class="content-title">三步实现滚动条触动css动画效果</p>
      	 						<P class="timeline-contentInfo">
      	 							<img src="img/t01.jpg"/>
      	 							<span>
      	 								现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...
      	 								<a href="#">阅读全文>></a>
      	 							</span>
      	 						</P>
      	 					</div>
      	 				</li>
      	 				<li>
      	 					<time>
      	 						<span class="date">08-08</span>
      	 						<span class="year">2017</span>
      	 					</time>
      	 					<div class="timeline-circle circle-normal"></div>
      	 					<div class="timeline-content">
      	 						<p class="content-title">三步实现滚动条触动css动画效果</p>
      	 						<P class="timeline-contentInfo">
      	 							<img src="img/t02.jpg"/>
      	 							<span>
      	 								现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...
      	 								<a href="#">阅读全文>></a>
      	 							</span>
      	 						</P>
      	 					</div>
      	 				</li>
      	 				<li>
      	 					<time>
      	 						<span class="date">08-08</span>
      	 						<span class="year">2017</span>
      	 					</time>
      	 					<div class="timeline-circle circle-normal"></div>
      	 					<div class="timeline-content">
      	 						<p class="content-title">三步实现滚动条触动css动画效果</p>
      	 						<P class="timeline-contentInfo">
      	 							<img src="img/t03.jpg"/>
      	 							<span>
      	 								现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...
      	 								<a href="#">阅读全文>></a>
      	 							</span>
      	 						</P>
      	 					</div>
      	 				</li>
      	 				<li>
      	 					<time>
      	 						<span class="date">08-08</span>
      	 						<span class="year">2017</span>
      	 					</time>
      	 					<div class="timeline-circle circle-normal"></div>
      	 					<div class="timeline-content">
      	 						<p class="content-title">三步实现滚动条触动css动画效果</p>
      	 						<P class="timeline-contentInfo">
      	 							<img src="img/t02.jpg"/>
      	 							<span>
      	 								现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...
      	 								<a href="#">阅读全文>></a>
      	 							</span>
      	 						</P>
      	 					</div>
      	 				</li>
      	 				
      	 			</ul>
      	 		</div>
      	 	</div>
      	 	<div class="footer">
      	 		<p>Design by DanceSmile 蜀ICP备11002373号-1</p>
      	 	</div>
    	</div>
    </body>
   
</html>
